/****************************************************************************************************************************
 * MOSAICO
 ***************************************************************************************************************************/

/**
 * Page html structure:
 * <body>
 *   #page
 *     #main-edit-area
 *       #main-wysiwyg-area
 *     #toolbar .mo
 *     #main-toolbox .mo
 *       #tooltabs
 *       #toolimages
 *       #tooldebug
 *       #tooltheme
 *     #main-preview .mo
 *       #preview-toolbar
 *       #frame-container
 *   #incompatible-browser
 *   #fake-image-editor
 *   #loading (usato solo da standalone)
 *   #moxman-loading
 *   #toast-container
 *   #contextmenu-help.mo
 *   #carousel-container.mo
 * 
 * CSS selector used, beyond the #ids before:
 * - .mo e .mo-*
 * - .ui-* (ui-helper-hidden-accessible, ui-tooltip)
 * - .moxman-* e .mce-*
 * - .fa-* (font-awesome, configurable via @fa-css-prefix)
 * - .icon-* (fontello: TODO remove me, we currently refer 2 icons from fontello)
 * - .evo-* (evo.colorpicker)
 * - .toast-* #toast-* (toastr)
 */

@leftsidebar-width: 400px;
@rightsidebar-width: 340px;
@mainarea-minwidth: 600px;
@topbar-height: 40px;

@screen-sm-max: 480px; // TODO Remove me, not used by mosaico (see style_page and style_admin)
@screen-md-max: 1020px; // TODO Remove me, not used by mosaico (see style_page and style_admin)
@screen-lg-max: 1460px; // Mosaico live preview will show beyond this

@mosaico-text-color: @text-color;
@mosaico-background-color: @background-color;
@mosaico-ui-background-color: @sidebar-background-color;
@mosaico-input-border-color: @input-border-color;
@mosaico-button-text-color: @button-text-color;
@mosaico-button-background-color: @button-background-color;
@mosaico-button-background-color-hover: @button-hover-background-color;
@mosaico-button-border-color: @button-border-color;
@mosaico-button-shadow-color: lighten(#fff - @mosaico-button-background-color, 30%); // Used in content
@mosaico-object-background-color: @object-background-color;
@mosaico-object-border-radius: @object-border-radius;
@mosaico-object-shadow: none;
@mosaico-helpwin-background-color: @helpwin-background-color;
@mosaico-helpwin-text-color: @helpwin-text-color;
@mosaico-accent-color: @accent-color;
@mosaico-outline-color: currentcolor;
@mosaico-shadow-color: #808080;
@mosaico-selection-color: #CC0000;

// Variabili base usate da voxmail: colori, stili
@import "style_variables.less";

// Icone font-awesome (.fa-* , configurable via @fa-css-prefix)
@import (optional) "font-awesome/less/font-awesome.less";

// Mosaico: editing tools (toolbar, left toolbox, right preview)
@import 'style_mosaico_tools.less';
// Mosaico: wysiwyg content
@import 'style_mosaico_content.less';

// Base mixins for style_elements_*
@import 'style_elements_mixins.less';
// Styles for tinymce/moxiemanager (uses .moxman-* and .moxie-*)
@import "style_elements_moxie.less";

.makeFontAwesome() { // TODO move this in style_utils?
  visibility: visible;
  font-family: FontAwesome;
  color: #333332;
  position: relative;
  top: 1px;
  left: -2px;
  display: inline-block;
}

@keyframes border-color-selection-pulsate {
    0% { border-color: @mosaico-outline-color; }
   40% { border-color: @mosaico-selection-color; }
   60% { border-color: @mosaico-selection-color; }
  100% { border-color: @mosaico-outline-color; }
}

@keyframes droppable-pulsate {
  0% { opacity: 1 }
  100% { opacity: .1 }
}

.makeDroppable() {
  .resetFont();
  font-weight: bold;

  content: attr(data-drop-content);
  text-align: center;
  line-height: 24px;
  position: absolute;
  // animation: pulse .5s ease-out 0s 4 alternate;
  animation: droppable-pulsate 1s ease-in-out infinite alternate;
  top: -14px;
  left: -10px;
  height: 24px;
  background-color: fade(@mosaico-selection-color, 60%);
  background-clip: content-box;
  color: white;
  right: -10px;
  border: 2px dashed @mosaico-selection-color;
  // this z-index prevent using fileupload by showing the droppable
  // under the mo-dropzone
  z-index: 10;
  pointer-events: none;
}

// Note that we avoid altering border/outline widths/opacity on hover/selection because of Webkit bugs (see safarihacks.css)
.makeSelectable(@size: 10px, @selectedSelector: ~'.selected', @selectedSize: 1px, @borderElementSelector: ~':after') {
  position: relative;

  &@{borderElementSelector} {
    content: "";
    display: block;
    position: absolute;
    // z-index: 0;
    top: -2px; bottom: -2px;
    left: -2px - @size;
    right: -2px - @size;

    // Use border for selection
    border: 1px solid transparent;
    border-width: @selectedSize;
    border-left-width: @size;
    border-right-width: @size;

    // Use outline for hover effects
    outline: 1px solid transparent;
    // outline-offset: -1px;
    opacity: 1;

    // otherwise this catches clicks and prevent correct selection of underlying text
    pointer-events: none;
  }
  &@{selectedSelector}@{borderElementSelector} {
    outline-color: transparent;
    // border: @selectedSize dashed @mosaico-selection-color;
    // border-left-width: @size;
    // border-right-width: @size;
    border-color: @mosaico-selection-color;
    border-style: dashed solid;
    animation: border-color-selection-pulsate 4s infinite;
  }
  &:hover@{borderElementSelector} {
    outline-color: @mosaico-outline-color;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
    animation: none;
  }

  &@{selectedSelector} {
    z-index: 10;
  }
  &:hover {
    z-index: 11;
  }

}

// Use this on the parent element and pass the editableSelector to the element where you applied .makeSelectable
.makeSelectableHover(@editableSelector, @selectedSelector: ~'.selected', @borderElementSelector: ~':before') {
  &:hover @{editableSelector}@{borderElementSelector} {
    // border-color: @mosaico-outline-color;
    outline-style: dashed;
    outline-color: @mosaico-outline-color;
    opacity: 0.3;
  }
  &:hover @{editableSelector}@{selectedSelector}@{borderElementSelector} {
    outline-style: solid;
    opacity: 1;
  }

  &:hover @{editableSelector}:not(@{selectedSelector}):hover@{borderElementSelector} {
    // border-color: transparent;
    // outline-color: transparent;
    outline-style: solid;
    opacity: 1;
  }
}

.resetFont() {
  font-family: @font-family;
  font-size: 16px;
  text-decoration: none !important;
}

/****************************************************************************************************************************
 * PAGE SETTINGS
 * Base styles / reset, full page layout
 ***************************************************************************************************************************/

body {
  background-color: @mosaico-ui-background-color;
  margin: 0;
  overflow: hidden; /* otherwsie TinyMCE menues sometimes makes scrollbars show in main body */
}
input, select, textarea, button { // input don't inherit font properties from body by default.
  font-family: inherit;
  font-size: inherit; 
  max-width: 100%;
}

* {
  user-select: none;
}
input,
textarea, 
[contenteditable], 
[contenteditable] *, // makes IE contenteditable content selectable again
.evo-color span // allow selecting for hex colors in colorpicker
{
  user-select: text;
}

// IE/CH
a[disabledhref] {
  color: #06C;
  color: -webkit-link;
  text-decoration: underline;
  cursor: auto;
}

// FF
a[disabledhref]:-moz-read-write {
  text-decoration: underline -moz-anchor-decoration;
  color: -moz-hyperlinktext;
}

/****************************************************************************************************************************
 * LAYOUT
 ***************************************************************************************************************************/

#page {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

#main-edit-area {
  left: 0;
  right: 0;
  overflow: hidden;
}

#main-edit-area, #toolbar {
  min-width: @mainarea-minwidth;
}

#toolbar {
  z-index: 110 !important; // Bigger than #main-toolbox .ui-tabs .ui-tabs-panel
  background-color: @mosaico-ui-background-color;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: @topbar-height;
}

#main-toolbox {
  backface-visibility: hidden;
  display: none;
  left: 0;
  width: @leftsidebar-width;
  box-shadow: 0 0 10px @mosaico-shadow-color, 0 0 5px @mosaico-shadow-color;
}
.withToolbox #main-toolbox {
  display: block;
}
.withToolbox #main-edit-area,
.withToolbox #toolbar {
  left: @leftsidebar-width;
}

#main-preview {
  backface-visibility: hidden;
  display: none;
  right: 0;
  width: @rightsidebar-width;
  //padding: 10px;
  overflow: hidden;
}
.withPreviewFrame #main-preview {
  display: block;
}
.withPreviewFrame #main-edit-area {
  right: (@rightsidebar-width + 5px);
}

#main-edit-area:before,
#main-edit-area:after,
#frame-container:before,
#frame-container:after {
  content: "";
  display: block;
  position: absolute;
  border: 0;
  height: @topbar-height;
  box-shadow: 0px 1px 10px @mosaico-shadow-color, 0px 0px 5px @mosaico-shadow-color;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
}
#main-edit-area:after {
  top: auto;
  bottom: -@topbar-height;
}
#frame-container:before {
  top: -@topbar-height;
}
#frame-container:after {
  top: auto;
  bottom: -@topbar-height;
}
#main-wysiwyg-area {
  position: absolute;
  top: @topbar-height;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  // http://blog.getpostman.com/2015/01/23/ui-repaint-issue-on-chrome/
  -webkit-transform: translate3d(0,0,0);
  // overflow-x: hidden;
}

/****************************************************************************************************************************
 * GENERIC UTILITIES: 
 * DRAG&DROP, UPLOADER, TOASTER, TOOLTIP, FONTS, LOADER
 ***************************************************************************************************************************/

#main-toolbox .draggable {
  &.image {

    width: 85px;
    height: 85px;
    text-align: center;
    vertical-align: middle;

    padding: 5px;
    border: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-origin: content-box;
    img {
      opacity: 0;
    }
  }
}
.ui-draggable-dragging {
  z-index: 10000;
}
.ui-draggable-dragging.sortable-placeholder {
  top: 0 !important;
  left: 0 !important;
}


.uploading .fileuploadtext {
  display: none;
}

.fileuploadtext {
  top: 0px !important;
  left: 0px !important;
  right: 0px !important;
  bottom: 0px !important;
  color: #000000;
}
.uploadzone .fileuploadtext {
  .resetFont();
  font-weight: bold;
}
.isdragging, .isdraggingimg {
  .uploadzone .fileuploadtext {
    display: none !important;
  }
}
.uploadzone .progress {
  display: none;
}
.uploadzone.uploading .progress {
  display: block;
}

/* this is needed to push a dropzone over a "makeDroppable" (greater z-index)
   because IE10 doesn't support "pointer-events: none" and images drag/drop from desktop wouldn't work */
.mo-uploadzone {
  position: absolute;
  // less than tools, greater than makeDroppable
  z-index: 15;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: block;
}

.toast-bottom-full-width {
  margin-left: 25%;
  margin-right: 25%;
  width: 50% !important;
}

#toast-container.toast-bottom-full-width > div {
  // width: 50% !important;
}

body > .ui-tooltip {
  .win();
  
  .resetFont();
  // font-family: @font-family;
  // font-size: 1em;
  font-size: 14px;

  border-width: 0px;
  padding: 8px;
  position: absolute;
  z-index: 9999;
  max-width: 300px;
  box-shadow: 0px 0px 5px #AAA;
}

.ui-helper-hidden-accessible {
  border: 0px none;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0px;
  position: absolute !important;
  width: 1px;
}

// Show "profile" icon in TinyMCE - TODO remove me
i.mce-i-newsletter-profile:before {
  content: '\e826'; //@see icon-profile14-noout
  font-family: "fontello";
}

.mo-standalone {
  @keyframes loading {
      0% { transform: scale(1, 1) rotate(0deg); }
     50% { transform: scale(1.5, 1.5) rotate(360deg); }
    100% { transform: scale(1, 1) rotate(720deg); }
  }

  #loading.loading img {
    animation: loading 4s linear infinite;
  }
}

@keyframes broken {
    0% { opacity: 0 }
   95% { opacity: 0 }
  100% { opacity: 1 }
}
#loading.loading div {
  animation: broken 10s linear forwards;
  padding: 1em;
  opacity: 1;
}

#carousel-dialog {
  .carousel-buttons {
    position: absolute; right: 5px; bottom: 10px;
  }
  .carousel-buttons .button {
    font-size: 1.2em;
  }
  .carousel-remember {
    font-size: 1.2em;
    position: absolute; left: 10px; bottom: 17px;
  }
  .carousel-remember input {
    vertical-align: middle; margin-right: .2em;
  }
  .owl-carousel {
    height: 550px;
  }
  .owl-controls {
    position: absolute; left: 0; right: 0; bottom: 7px;
  }
  .owl-controls .owl-page.active span {
    background-color: @button-background-color;
  }
  .owl-controls .owl-page span {
    background-color: @accent-color;
    /*opacity: 1;*/
  }
  .carousel-help {
    margin-top: 5px;
    font-size: 1.2em;
  }
  .carousel-help-text {
    line-height: 1.5em;
  }
  .carousel-help-text.large-width {
    width: 80%;
    margin: 0 auto;
  }
  .carousel-help-text p {
    padding: .5em;
  }
  .carousel-help-image {
  }
  .carousel-help .left {
    margin-right: 20px;
  }
  .carousel-help .top {
    margin-bottom: 10px;
  }
  .carousel-help-balloon {
    display: flex; display: -webkit-flex; display: -ms-flexbox;
    align-items: center; -webkit-align-items: center;
    /*-ms-flex-align: center; -webkit-box-align: center;*/
    justify-content: center;
    text-align: center;
    overflow: auto;
    padding: 0 .5em;
    // fix per IE10
    > div { width: 100% }
  }
}
